<template>
  <div class="scroll-list">
    <van-pull-refresh class="refresh" v-model="refresh" @refresh="onRefresh">
      <div class="list">
        <slot></slot>
      </div>
      <div class="loading-wapper" v-show="!refresh"></div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const props = defineProps({
  finshed: { type: Boolean, default: false }
})
const emit = defineEmits(['refresh', 'load']);

//  编写上拉加载，下拉刷新功能
const refresh = ref(false);

const onRefresh = () => {
  setTimeout(() => {
    refresh.value = false;
    emit('refresh');  //  下拉刷新
  }, 300);
};


onMounted(() => {
  const ob = new IntersectionObserver(entries => {
    if (!props.finshed) {
      emit('load');
    }
  }, {
    root: document.querySelector('.scroll-list'),
  });

  ob.observe(document.querySelector('.loading-wapper'));
})
</script>

<style lang="scss" scoped>
.scroll-list {
  flex: 1;
  overflow-y: auto;

  .refresh {
    min-height: 100%;
  }

  .list {
    height: 100%;
  }

  .loading-wapper {
    height: 0rem;
    text-align: center;
    line-height: 0rem;
  }
}
</style>